<!--
 * @Author: your name
 * @Date: 2020-12-28 17:53:01
 * @LastEditTime: 2020-12-29 14:27:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \basicvue\vuehtml\vueindex.html
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/common.css">
    <link rel="stylesheet" href="../assets/css/vue.css">
    <script src="../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
    <a href="../index.html" class="retu">BACK</a>
    <h1>mixins混合选项操作</h1>
    <p>num : {{ num }}</p>
    <p><span>{{showres}}</span></p>
    <p><button @click="add">增加数量</button></p>
    <hr>
    <span>在执行顺序上来说,都是混入的先执行，然后构造器里面的再执行，这里不是覆盖，而是被执行两遍
        ----全局混入的优先级大于外部混入的大于构造器中混入的
    </span>
</div>
<script type="text/javascript">
    //额外临时加入,用户显示日志
    var addLog = {
        updated:function () {
            console.log('num发生了你变化,变化之后的值为'+this.num)
            this.showres = 'num发生了你变化,变化之后的值为'+this.num;
        }
    };

    //全局API的混入方式
    Vue.mixin({
        updated:function(){
            console.log('我是全局混入的'+app.num);
        }
    });

    var app = new Vue({
        el : '#app',
        data : {
            num : 1,
            showres: ''
        },
        methods:{
            add:function () {
                this.num++;
            }
        },
        //混入模式
        mixins:[addLog],//混入
        updated:function(){
            console.log('构造器中的updated方法');
        }
    });


</script>
</body>
</html>